@devtools-ds/icon

@devtools-ds/icon

A set of React-packaged SVG icons commonly used in developer tools.

Installation

npm i @devtools-ds/icon
# or with yarn
yarn add @devtools-ds/icon

Accessibility Approach

By default, all icons are set to aria-hidden and focusable="false" in order to hide them from screen readers and stop focus on Microsoft browsers. Most of the time, these icons will be accompanied by text which should properly label them. If your icon is being used as a button, wrap it in a button component with the proper labeling instead of labeling the icon.

Usage

Icons are packaged as individual React components.

import { AlertIcon } from "@devtools-ds/icon";

// individual icon
<AlertIcon />;

Sizing

There are three ways to size the icons: a size prop, inline, or with width and height. I've included an example of each below.

import { AlertIcon } from '@devtools-ds/icon';

// This will resize based on the four preset icon sizes used in the design system.
<AlertIcon size="large"/>
// This will inherit the fontSize attribute in order to work inline with text.
<AlertIcon inline />
// This will resize using normal SVG resize controls
<AlertIcon width="30px" />

Inline Icons and currentColor

The inline prop makes the icon inherit the fontSize css attribute, and position itself inline with text around it. By default, the icon has fill="currentColor" set based on the currentColor css attribute. This will inherit the surrounding font color, but can be overwritten as needed.

References

• Accessible SVG Icons
• How to Scale SVG
• xmlns SVG reference

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Tyler Krupicka 💻 📖 🎨 🚇 💡 ⚠️

Adam Dierkens 💻

kharrop 🎨

Tyler Krupicka 📖 💻 💡 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

Changelog

v0.131.0 (Tue Jan 26 2021)

🚀 Enhancement

• @devtools-ds/console, @devtools-ds/dom-inspector, @devtools-ds/diagnostic, @devtools-ds/icon, @devtools-ds/navigation, @devtools-ds/node, @devtools-ds/object-inspector, @devtools-ds/table, @devtools-ds/tree, @devtools-ds/storybook-theme-addon
  • Navigation Accessibility #4 (@tylerkrupicka)

📝 Documentation

• Update README.md #3 (@tylerkrupicka)

Authors: 1

• Tyler Krupicka (@tylerkrupicka)

---